<template>
    <div class="con">
         <!-- 头部部分 -->
            <van-nav-bar class="header">
                <i slot="left" class="iconfont iconzuojiantou" @click="$router.go(-1)"></i>
                <p slot="title" class="title">消息</p>
                <i slot="right" class="iconfont iconShapes"></i>
            </van-nav-bar>
            <!-- 导航部分 -->
            <van-tabs class="nav" title-inactive-color="#a6a6b0">
              <van-tab>  
                <div slot="title">
                <div>                
                  
                    <i class="iconfont icontongzhi icons child"></i>                 
                
                </div>           
                <p>通知</p>
                </div>     
                <!-- 标签页内容 -->
                <div slot="default" class="conten">                
                    <div class="user-info" @click="$router.push('/xinxi')">
                      <van-nav-bar>
                        <div class="image" slot="left">
                                    <van-image                             
                                    :src="require('@/assets/1.png')"                                              
                                    fit="cover"                                                
                                    />
                        </div>
                        <div slot="title" class="user-title">
                            <h3>Eartha</h3>
                            <p>是时候准备过冬了。</p>
                        </div>
                        <div slot="right" class="right">
                            <p class="user-data">5分钟</p>
                            <span></span>                       
                        </div>
                      </van-nav-bar>
                    </div>
                    <div class="user-info">
                      <van-nav-bar>
                        <div class="image" slot="left">
                                    <van-image                             
                                    :src="require('@/assets/3.png')"                                              
                                    fit="cover"                                                
                                    />
                        </div>
                        <div slot="title" class="user-title">
                            <h3>Abagael</h3>
                            <p>我觉得用这首歌很好。</p>
                        </div>
                        <div slot="right" class="right">
                            <p class="user-data">10分钟</p>
                            <span></span>                       
                        </div>
                      </van-nav-bar>
                    </div>
                    <div class="user-info">
                      <van-nav-bar>
                        <div class="image" slot="left">
                                    <van-image                             
                                    :src="require('@/assets/4.png')"                                              
                                    fit="cover"                                                
                                    />
                        </div>
                        <div slot="title" class="user-title">
                            <h3>Kaitlyn</h3>
                            <p>除了嘴唇，还有你的心</p>
                        </div>
                        <div slot="right" class="right">
                            <p class="user-data">10分钟</p>
                                                   
                        </div>
                      </van-nav-bar>
                    </div>
                    <div class="user-info">
                      <van-nav-bar>
                        <div class="image" slot="left">
                                    <van-image                             
                                    :src="require('@/assets/7.png')"                                              
                                    fit="cover"                                                
                                    />
                        </div>
                        <div slot="title" class="user-title">
                            <h3>Madeline</h3>
                            <p>北方已经下雪了。</p>
                        </div>
                        <div slot="right" class="right">
                            <p class="user-data">20分钟</p>
                                              
                        </div>
                      </van-nav-bar>
                    </div>
                    <div class="user-info">
                      <van-nav-bar>
                        <div class="image" slot="left">
                                    <van-image                             
                                    :src="require('@/assets/2.png')"                                              
                                    fit="cover"                                                
                                    />
                        </div>
                        <div slot="title" class="user-title">
                            <h3>Bunny</h3>
                            <p>有些事情是错误的</p>
                        </div>
                        <div slot="right" class="right">
                            <p class="user-data">20分钟</p>
                                                 
                        </div>
                      </van-nav-bar>
                    </div>
                    <div class="user-info">
                      <van-nav-bar>
                        <div class="image" slot="left">
                                    <van-image                             
                                    :src="require('@/assets/6.png')"                                              
                                    fit="cover"                                                
                                    />
                        </div>
                        <div slot="title" class="user-title">
                            <h3>Estelle</h3>
                            <p>我还是受不了</p>
                        </div>
                        <div slot="right" class="right">
                            <p class="user-data">30分钟</p>
                                               
                        </div>
                      </van-nav-bar>
                    </div>
                </div>
              </van-tab> 
              <van-tab>  
                <div slot="title">               
                  <i class="iconfont iconShape1 icons"></i>
                  <p>评论</p>
                </div>                  
              </van-tab>    
              <van-tab>  
                <div slot="title">               
                  <i class="iconfont iconLikeIcon1 icons"></i>
                  <p>收藏</p>
                </div>                  
              </van-tab>         
            </van-tabs>         
    </div>
</template>
<script>
export default {
  data() {
    return {
    }
  }
}
</script>
<style lang="less">
.con{
   // 头部下划线
    .van-hairline--bottom::after{
        border: none;
    }
     .child {
      width: 40px;
      height: 40px;
      border-radius: 4px;     
    }
    .van-badge{
        width: 7px;
        height: 10px;
        min-width:16px;
        padding: 0px;
        font-size: 12px;
        top: 15px;
        right: 7px;
    }
  // 头部部分
    .header{       
        margin-bottom: 25px; 
        .iconzuojiantou{
                font-size: 40px;
                color: #535353;
                padding-left: 18px;
        }
        .title{
            font-size: 32px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #484747;
        }
        .iconShapes{
            font-size: 40px;
            color: #535353;
            padding-right: 18px;
        }
    }
    // 导航部分
     .van-tabs--line .van-tabs__wrap{
          height: 99px;
      }
      .van-tabs--line .van-tabs__wrap{
        margin-bottom: 30px;
      }
      // .van-tab{
      //   line-height: 88px;
      // }
    .nav{     
      .van-tabs__line{
        display: none;
      }
      .van-tab__text--ellipsis{
        -webkit-line-clamp:2
      }
      .icons{
          font-size: 42px;
          display: block;
          margin-bottom: 6px;
          padding-top: 5px;
      }
      p{
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;  
      }
    }
    // 内容
    .conten{
      padding: 0px 30px;
      .van-nav-bar{
        padding:17px 28px;
      }
      .user-info{
        width: 100%;
        height: 120px;
        margin-bottom: 30px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.13);
        .van-nav-bar__title{
          margin: 0px  0px 0px 144px;
        }
        .image{
            width: 86px;
            height: 86px;
            img{
              width: 86px;
              height: 86px;
              border-radius: 50%;
            }
        }
        .user-title{
           text-align: left;
          h3{
            font-size: 28px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #4a4a4a;
          }
          p{
            font-size: 22px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #9b9b9b;
          }
        }
        .right{
          display: flex;
          flex-direction: row;
         align-items: center;
        .user-data{
                font-size: 22px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #9b9b9b;
                 margin-right: 11px;
              }
              span{
                width: 10px;
                display: block;
                border-radius: 50%;
                height: 10px;
               
                background-color: #e86c6c;
              }
        }
      
      }
    }
   
}
</style>
